<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>修改姓名</title>
    <link rel="stylesheet" type="text/css" href="../../../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/style.css" />
    <style>
        html,
        body {
            /*background: #fff;*/
        }

        .inner_header {
            font-size: 1.6rem;
            color: #000000;
            font-weight: 600;
            height: 6.9rem;
            margin: 0;
            padding: 2.4rem 0 0 0;
            box-sizing: border-box;
            background: none!important;
            box-shadow: 0rem 0rem 0.8rem 0rem rgba(0, 0, 0, 0.08);
            background: #fff!important;
        }

        .inner_header .right {
            font-size: 1.4rem;
            color: #ed6a20;
        }

        .content {
            width: 100%;
            float: left;
            margin: 6.9rem 0 0 0;
        }

        .content_list {
            background: #fff;
            width: 100%;
            float: left;
            box-sizing: border-box;
            padding: 0 0 0 1.3rem;
        }

        .content .ash {
            background-color: #f2f2f2;
            height: 3.7rem;
            width: 100%;
            line-height: 3.7rem;
            font-size: 1.3rem;
            color: #999;
        }

        .content_li {
            float: left;
            width: 100%;
            height: 4.45rem;
            box-sizing: border-box;
            border-bottom: 0.05rem solid #e6e6e6;
            color: #333333;
            font-size: 1.5rem;
            line-height: 4.45rem;
            display: flex;
            text-align: center;
        }

        .content_li .text {
            line-height: 4.45rem;
            height: 4.45rem;
            flex: 1;
            font-size: 1.5rem;
        }

        input::-webkit-input-placeholder {
            /* placeholder颜色  */
            color: #000;
            /* placeholder字体大小 */
            font-size: 1.5rem;
            /* placeholder字间距  */
            letter-spacing: 0rem;
        }
    </style>
</head>

<body>
    <div id="app">
        <header class="aui-bar aui-bar-nav aui-bar-light inner_header">
            <a class="aui-pull-left aui-btn" onclick="goBack()">
                <img src="../../../../image/back.png">
            </a>
            <div class="aui-title">修改姓名</div>
            <a class="aui-pull-right share_nav_right right" @click="submit">
              完成
          </a>
        </header>
        <div class="content">
            <div class="content_list ash">
                2-24个字符, 一个月只能申请修改一次
            </div>
            <div class="content_list">
                <div class="content_li">
                    <input type="text" placeholder="请输入昵称" class="text only" @input="clickInput" ref="refcode" :value="name" maxlength="24">
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../../../script/api.js"></script>
<script type="text/javascript" src="../../../../script/axios.min.js"></script>
<script type="text/javascript" src="../../../../script/axios-config.js"></script>
<script type="text/javascript" src="../../../../script/zepto.js"></script>
<script type="text/javascript" src="../../../../script/vue.min.js"></script>
<script type="text/javascript" src="../../../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../../../script/utils.js"></script>
<script type="text/javascript" src="../../../../script/common.js"></script>
<script type="text/javascript" src="../../../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../../../script/aui-toast.js"></script>
<script type="text/javascript" src="../../../../script/aui-pull-refresh.js"></script>

<script type="text/javascript">
    var toast = new auiToast({})
    apiready = function() {
        new Vue({
            el: "#app",
            data: {
                name: ''
            },
            mounted:function(){
                var user_info = $api.getStorage('user_info');  //获取用户信息缓存
                var token =  $api.getStorage('token');  //获取token
                this.name = user_info.username
            },
            methods: {
                submit:function(){
                    var name = this.name;
                    if(name.length>2){
                        var data={
                            token: $api.getStorage('token'),
                            nickname:name
                        }
                        Axios.post(window.Url.savememberinfo, data).then(function(res) {
                            if(res.status==1){
                                var user_info = $api.getStorage('user_info');  //获取用户信息缓存
                                user_info.username = name
                                $api.setStorage('user_info',user_info)
                                api.sendEvent({
                                    name: 'update_user_info',
                                    extra: {
                                        info:"updata"
                                    }
                                });
                                api.closeWin({});
                            }else {
                                toast.fail({
                                    title:res.info,
                                    duration:2000
                                });
                            }
                        })
                    }else {
                        toast.fail({
                            title:"请输入正确格式",
                            duration:2000
                        });
                        return false
                    }
                    // console.log(name)
                },
                clickInput: function() {
                    var name = this.$refs.refcode.value
                    this.name = name;
                },
            }
        })
    };
    function goBack() {
      api.closeWin({});
    }
</script>

</html>
